<template>
    <div>
        <mt-header fixed class="m_mint_header" title="邀请好友">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
        <div class="my_invite">
            <div id="shareLink" style="display: none;">{{urlRegister}}</div>
            <mt-field id="aaa" label="我的邀请链接" disabled :value="urlRegister"></mt-field>
            <mt-field label="我的邀请码" disabled :value="user.code">
                <el-button class="my_invite_copy_button" size="mini" type="primary" @click.native="copyLink">复制链接
                </el-button>
            </mt-field>
        </div>
        <div style="padding: .3rem">
            <p class="my_invite_detail_top">我的收益</p>
            <div class="my_invite_detail">
                <router-link to="/m/friends-record">
                    <h3>邀请人数</h3>
                    <img style="width: 60px;" src="@/assets/img/m/friendsUser.png" alt="">
                    <p>{{myInviteData.length}}</p>
                </router-link>
                <router-link to="/m/friends-details">
                    <h3>返回佣金</h3>
                    <img style="width: 60px;" src="@/assets/img/m/friendsMoney.png" alt="">
                    <p>{{returnRecordData}}</p>
                </router-link>

            </div>
            <p class="my_invite_detail_bottom_title">邀请规则</p>
            <p class="my_invite_detail_bottom_detail">邀请规则邀请规则邀请规则邀请规则邀请规则邀请规则邀请规则邀请规则</p>
        </div>


    </div>
</template>

<script>

    import axios from "axios"

    export default {
        name: "Friends",
        data() {
            return {
                sid: this.$cookies.get('sid'),
                user: this.$cookies.get('user'),
                urlRegister: axios.defaults.baseRigisterURL + '/#/m/register?invite=' + this.$cookies.get('user').code,
                myInviteData: [],
                returnRecordData: 0,
            }
        },
        mounted() {
            // console.log('user',this.$cookies.get('user'));
            this.requestGetMyInvite();
            this.requestGetReturnRecord();
        },
        methods: {

            requestGetMyInvite() {
                this.requestAxios.requestWeb('post', '/api/my_invite.do', null, (response) => {
                    // console.log('invite ==',response);
                    this.myInviteData = response.data;
                })
            },

            requestGetReturnRecord() {
                this.requestAxios.requestWeb('post', '/api/return_record.do', null, (response) => {
                    console.log('return ==', response);
                    let num = 0;
                    for (let i = 0; i < response.data.length; i++) {
                        num += response.data[i].amount;
                    }
                    this.returnRecordData = num;
                })
            },

            copyLink() {
                var Url2 = document.getElementById("shareLink").innerText;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                this.$toast({message: this.$t('toast.success'), duration: 1000});
            }
        }
    }
</script>

<style>


    .my_invite .mint-cell-wrapper {
        border-bottom: 1px solid #eee !important;
    }


    .my_invite .mint-cell-wrapper {
        font-size: .3rem;
    }

    .my_invite_detail_top {
        padding: 0 0 .3rem .2rem;
        font-weight: bold;
        font-size: .3rem;
    }

    .my_invite_detail {
        background: #fff;
        padding: .3rem;
        display: flex;
        border-radius: .2rem;
        box-shadow: 5px 5px 10px #e4e4e5;
    }

    .my_invite_detail a {
        flex-grow: 1;
        text-align: center;
    }

    .my_invite_detail a:first-child {
        border-right: 2px solid #f2f2f8;
    }

    .my_invite_detail h3 {
        color: #333;
        font-weight: bold;
    }

    .my_invite_detail img {
        margin: .1rem 0;
    }

    .my_invite_detail p {
        color: #fa9741;
        font-size: .35rem;
    }

    .my_invite_detail_bottom_title {
        margin-top: .3rem;
        margin-bottom: .1rem;
        font-weight: bold;
    }

    .my_invite .my_invite_copy_button {
        background: transparent;
        padding: .1rem .2rem;
        color: #ebaa78;
        border: 1px solid #ebaa78;
        border-radius: .3rem;
        font-weight: bold;
    }

    .my_invite .my_invite_copy_button:focus, .my_invite .my_invite_copy_button:hover {
        background: transparent;
        color: #ebaa78;
        border: 1px solid #ebaa78;
    }

    .my_invite a:focus, .my_invite a:hover {
        color: #333;
    }

</style>
